<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入vue3 js文件 -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>

<body>
    <div id="app">
        <p>{{msg}}</p>
    </div>
</body>

</html>
<script>

    // 01: 引入vue3.js,就会存在一个Vue 大对象;
    console.log(Vue);
    // 02: 使用Vue 这个大对象中的createApp 方法来创建一个vue实例对象
    // app 为vue3实例化出来的对象
    const app = Vue.createApp({
        data() {
            return {
                msg: "vue3中的20大开幕"
            }
        }

    })

    //03: 将dom 节点挂载到 vue 实例上
    app.mount('#app')
    console.log(app);

    //04: 问题?
    // data 数据为什么不能直接是对象,而是函数返回的形式?
    // 如下写法会报错, 在vue3中,实例对象可以多个,那么当每一个实例对象中的数据相同的话,
    // 这时候渲染,数据之间会有影响,存在覆盖的情况. 如果使用函数返回的形式,数据变成私有数据,不受外部的影响
    // data: {
        //     msg: "vue3中的20大开幕"
        // }

</script>